{extend name="index/base" /}
{block name='title'}Order Confirm{/block}
{block name='content'}
<div class="category-body" style="background-color: #f5f5f5">
    <div class="container py-5">
        <div  class="checkout-wrap clearfix mb-2">
            <div class="checoutInnerWrap">
                <div v-show="step=='location'" class="checoutInner">
                    <div class="edit-address-wrap">
                        <h4 class="checkout-title">Place An Order</h4>
                        <div class="gnobSP">                            
                            <div class="contact-information">
                                <div class="header">
                                    <h2 class="contact-title">Contact information</h2>
                                    {if(empty(session('user_info.user_id')))}
                                    <p>Already have an account?&nbsp;<a href="#signin-modal" class="guide-to-login " data-bs-toggle="modal">Login</a></p>
                                    {/if}
                                </div>
                                <div class="email-input">
                                    <el-form :model="emailInfo" :rules="rules" ref="order" label-width="0px" class="gnobSP">
                                        <el-form-item prop="email" class="kVomof">
                                            <el-input v-model="emailInfo.email" placeholder="Email Address"></el-input>
                                            <!-- <input autocomplete="on" name="email" placeholder="Email" required="" type="email"  v-model="emailInfo.email"> -->
                                        </el-form-item>
                                    </el-form>
                                </div>

                                <label class="default-button"><input name="subscribe" type="checkbox" v-model="emailInfo.email_subscribe">Keep me up to date on news and exclusive offers</label>
                            </div>

            
                            {if(!empty(session('user_info.user_id')))}
                            <div class="address-box">
                                <div class="list" v-for="(item,index) in address_list" :key="index" @click="handleSetLocation(item)">
                                    <p class="name">
                                        <span class="name-txt">{{item.first_name}}&nbsp;&nbsp;{{item.last_name}}</span> 
                                        <span class="phone">{{item.phone}}</span>
                                    </p>
                                    <p class="email">{{item.email}}</p>
                                    
                                    <p class="address">{{item.city}} {{item.state}} {{item.country_name}} {{item.postcode}} {{item.street}} {{item.suite}}</p>

                                    <a class="btns" href="javascript:;"@click="handleSetLocation(item)">Choose</a>
                                </div>
<!-- 
                                <div class="list">
                                    <p class="name"><span class="name-txt">wulin yang</span> <span class="phone">8059845961</span></p>

                                    <p class="address"> Adachi Ku Tokyo Japan 120-0000 adfasd </p>
                                </div> -->

                                <!-- <div class="add-address">
                                    <span class="add-txt pa"><i class="add"></i><span class="txt">Add New Address</span></span>
                                </div> -->
                            </div>
                            {/if}

                             <el-form :model="locationInfo" :rules="rules" ref="order" label-width="0px">
                                <div class="title">Shipping address&nbsp;<span class="title-tips">(Please specify to the house number.)</span></div>

                                <div class="form-item-container">
                                    <div class="form-item">
                                        <el-form-item prop="country" class="indexstyle-sc-1p4nwz9-0 kVomof">
                                            <el-select v-model="locationInfo.country" filterable placeholder="" style="width: 100%" @change="changeCountry">
                                                <el-option label="*Please select country/region" value=""></el-option>
                                                <el-option
                                                    v-for="(item,index) in city_list"
                                                    :key="index"
                                                    :label="item.name"
                                                    :value="index">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </div>
                                <div class="form-item-container">
                                    <div class="form-item">
                                        <el-form-item prop="first_name" class="indexstyle-sc-1p4nwz9-0 kVomof">
                                            <el-input v-model="locationInfo.first_name" placeholder="*First name"></el-input>
                                        </el-form-item>
                                    </div>
                                    <div class="form-item">
                                        <el-form-item prop="last_name" class="indexstyle-sc-1p4nwz9-0 kVomof">
                                            <el-input v-model="locationInfo.last_name" placeholder="*Last name"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                                <div class="form-item-container">
                                    <div class="form-item">
                                        <el-form-item prop="street"  class="indexstyle-sc-1p4nwz9-0 kVomof">
                                            <el-input v-model="locationInfo.street" :placeholder="'*'+(get_country_info_label.address1?get_country_info_label.address1:'Address: Street name and house number')"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>

                                <div class="form-item-container">
                                    <div class="form-item">
                                        <el-form-item prop="suite" class="indexstyle-sc-1p4nwz9-0 kVomof">
                                            <el-input v-model="locationInfo.suite" :placeholder="'*'+(get_country_info_label.address2?get_country_info_label.address2:'Apartment, suite, etc. (optional)')"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>

                                <div class="form-item-container">
                                    <!--<div class="form-item">
                                        <el-form-item prop="state" class="indexstyle-sc-1p4nwz9-0 kVomof">
                                            <el-input v-model="locationInfo.state" placeholder="*State/Province"></el-input>
                                        </el-form-item>
                                    </div>-->
                                    <div class="form-item" v-if="get_country_info_address_format_edit_field.indexOf('province')>-1 && get_country_info.provinces && Object.keys(get_country_info.provinces).length>0">
                                        <el-form-item prop="province" class="indexstyle-sc-1p4nwz9-0 kVomof">
                                            <el-select v-model="locationInfo.state"  :placeholder="'*'+(get_country_info_label.province?get_country_info_label.province:'State')" style="width: 100%">
                                                <el-option
                                                        v-for="(item,index) in get_country_info.provinces"
                                                        :key="index"
                                                        :label="item.name"
                                                        :value="index">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div class="form-item">
                                        <el-form-item prop="city" class="indexstyle-sc-1p4nwz9-0 kVomof" v-show="get_country_info_address_format_edit_field.indexOf('city')>-1">
                                            <el-input v-model="locationInfo.city" :placeholder="'*'+(get_country_info_label.city?get_country_info_label.city:'City')"></el-input>
                                        </el-form-item>
                                    </div>

                                    <div class="form-item" v-if="get_country_info_address_format_edit_field.indexOf('region')>-1 && get_country_info.provinces && Object.keys(get_country_info.provinces).length>0">
                                        <el-form-item prop="province" class="indexstyle-sc-1p4nwz9-0 kVomof">
                                            <el-select v-model="locationInfo.state"  placeholder="*Region" style="width: 100%">
                                                <el-option
                                                        v-for="(item,index) in get_country_info.provinces"
                                                        :key="index"
                                                        :label="item.name"
                                                        :value="index">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>

                                    <div class="form-item">
                                        <el-form-item prop="postcode" class="indexstyle-sc-1p4nwz9-0 kVomof" v-show="get_country_info_address_format_edit_field.indexOf('postcode')>-1">
                                            <el-input v-model="locationInfo.postcode" :placeholder="'*'+(get_country_info_label.zip?get_country_info_label.zip:'Postal Code')"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>



                                <div class="form-item-container">
                                    <div class="form-item">
                                        <el-form-item prop="phone" class="indexstyle-sc-1p4nwz9-0 kVomof">
                                            <el-input v-model="locationInfo.phone" placeholder="*Phone Number"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>

                                <!-- <label class="save-info-checkbox"><input name="saveInfo" type="checkbox">Save this information for next time</label>-->

                                <a type="submit" class="submit" href="javascript:;" @click="handleStepNext('order')"><div class="children-container">CONTINUE TO SHIPPING METHOD</div></a>
                            </el-form>
                        </div>
                    </div>
                </div>

                <div  v-show="step=='order'" class="checoutInner">
                    <div class="edit-address-wrap">
                        <h4 class="checkout-title">Place An Ordersss</h4>


                        <div class="info-card">
                            <div class="indexstyle-sc-5qhp9r-0 flACk">
                                <div class="info-item">
                                    <h2 class="title">Contact</h2><p class="description">{{get_contact_name}}&nbsp;&nbsp;{{emailInfo.email}}</p>
                                </div>
                                <div class="info-item">
                                    <h2 class="title">Ship to</h2>
                                    <p class="description">{{get_ship_to}}</p>
                                    <a href="javascript:;" class="back-icon" @click="handleStepNext('location')">Edit</a>
                                </div>
                            </div>
                        </div>

                        <div v-if="get_tip_list.length>0">
                            <h4 class="checkout-title">Add Tip</h4>

                            <div class="select-shipping-add">
                                <p class="add-title">Show your support for the team at lovessales</p>

                                <div class="select-shipping-row">
                                    <label class="" :class="{'active':!orderInfo.tip_money.length && orderInfo.tip_index===index}" v-for="(item,index) in get_tip_list" :key="index" @click="handleTipSelect(index)">
                                        <div class="main-info">
                                            <h2>{{item.name}}</h2>
                                            <div class="notranslate">{{item.tip_money}}</div>
                                        </div>
                                    </label>

                                </div>
                                <div class="select-shipping-from">
                                    <input name="promotion_code" type="number" v-model="orderInfo.tip_money" maxlength="40" placeholder="Custom tip" autocomplete="off">
                                    <button type="submit" class="add-submit" id="add-submit"  @click="handleTipCustom">Add Tip</button>
                                </div>

                                <p class="add-tips">Thank you.we.appreciate it</p>

                            </div>
                        </div>
                        <h4 class="checkout-title">Shipping Method</h4>

                        <div class="select-shipping-method">
                            <div class="indexstyle-vta0r7-0 hKppHB" v-if="express_list.length>0 && express_money-0>0">
                                <label :class="{'active':item.id==orderInfo.express_id}" v-for="(item,index) in express_list" :key="index" @click="orderInfo.express_id=item.id">
                                    <input name="shipping-method" type="radio" :checked="item.id==orderInfo.express_id" >
                                    <div class="main-info">
                                        <h2>{{item.name}}</h2>
                                        <div class="notranslate">{$money_f}{{item.money}}</div>
                                    </div>
                                </label>

                            </div>

                            <p class="shipping-tips" v-if="get_express_state==1">Free delivery for over {$money_f}{{express_money}}</p>
                            <p class="shipping-tips" v-else-if="get_express_state==2">Free delivery is over  {$money_f}{{express_money}}</p>
                            <p class="shipping-tips" v-else>Free of delivery fee</p>

                        </div>


                        <h4 class="checkout-title">Payment</h4>

                        <div class="select-shipping-method ">
                            <div class="payment-method-list">
                                <label class="" :class="{'active':pay_way=='paypal'}" @click="handlePayWay('paypal')">
                                    <input name="paymentName" type="radio" :checked="pay_way=='paypal'">
                                    <div class="main-info">
                                        <h2>PayPal</h2>
                                        <div class="">
                                            <img alt="" src="/assets/images/paypal.png">
                                        </div>
                                    </div>
                                </label>

                                <label class="" :class="{'active':pay_way=='asiabill'}" @click="handlePayWay('asiabill')">
                                    <input name="paymentName" type="radio"  :checked="pay_way=='asiabill'">
                                    <div class="main-info">
                                        <h2>Credit / Debit Card</h2>
                                        <div class="">
                                            <img alt="" src="/assets/images/paycard.png">
                                        </div>
                                    </div>

                                    <!--<div class="additional-info">
                                        <form action="" id="frames-payment-form">
                                            <label for="card-number">Card number</label>
                                            <div class="input-container">
                                                <input type="text" id="card-number" v-model="asiabillInfo.number" name="cardnumber" placeholder="Card number" required="" type="text" />
                                            </div>
                                            <label for="cardholder">Cardholder name</label>
                                            <div class="input-container">
                                                <input class="card-name frame&#45;&#45;activated" v-model="asiabillInfo.name" id="cardholder" minlength="4" name="cardholder" placeholder="Cardholder name" required="" type="text" />
                                            </div>
                                            <div class="date-and-code">
                                                <div>
                                                    <label for="expiry-date">Expiry date</label>
                                                    <div class="input-container">
                                                        <input type="text" id="expiry-date" v-model="asiabillInfo.date" name="exp-date" placeholder="MM/YY" required="" type="text" />
                                                    </div>
                                                </div>
                                                <div>
                                                    <label for="cvv">Security code</label>
                                                    <div class="input-container">
                                                        <input type="text" id="cvv" name="cvv"  v-model="asiabillInfo.code" placeholder="CVV" required="" type="text" />
                                                    </div>
                                                </div>
                                            </div>


                                            &lt;!&ndash;<button disabled="" id="frames-payment-button" class="indexstyle-sc-147lzxr-0 iLHSAg">
                                                <div class="children-container">PAY<span class="notranslate">{$money_f}73.97</span></div>
                                            </button>&ndash;&gt;
                                        </form>
                                    </div>-->
                                </label>
                            </div>



                        </div>
                        

                        <h4 class="checkout-title">Message</h4>

                        <div class="checkout-message">                        
                            <textarea name="textarea" rows="5" cols="25" v-model="remark"></textarea>
                        </div>

                    </div>
                </div>
            </div>

            <div class="carRight">

                <div class="pay-panpel-content">
                    <div class="title"><h4>{{goods_list.length}} PRODUCTS</h4></div>
                    <div class="pay-product-list">
                        <div class="pay-product-item" v-for="(item,index) in goods_list" :key="index">
                            <div class="product-item-img"><img :src="item.cover_img" :alt="item.name"></div>
                            <div class="product-item-right">
                                <div class="product-name"> {{item.name}}</div>
                                <div class="size-box" v-if="listQuery.channel=='cart_custom'">
                                    <div class="list">
                                        <div v-for="(cart_logo_list_item,cart_logo_list_index) in item.cart_logo_list" :key="cart_logo_list_index">
                                            <p class="size-text"><img :src="cart_logo_list_item.logo" alt="logo" width="45" height="45"/></p>
                                            <span class="qty">title: {{cart_logo_list_item.title}}</span>
                                            <span class="qty">name: {{cart_logo_list_item.name}}</span>
                                        </div>
                                    </div>
                                    <span class="qty">remark: {{item.cart_remark}}</span>
                                    <div class="list">
                                        <div v-for="(cart_list_item,cart_list_index) in item.cart_list" :key="cart_list_index">
                                            <p class="size-text">size: {{cart_list_item.size}}</p>
                                            <span class="qty">name: {{cart_list_item.name}}</span>
                                            <span class="qty">color: {{cart_list_item.color}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="size-box" v-else>
                                    <p class="size-text">{{item.sku_name}}</p>
                                    <span class="qty">Qty: {{item.buy_num}}</span>
                                </div>
                            </div>
                            <div class="product-item-price">
                                <span class="bizhong">{$money_f_name}</span>
                                <span class="my_shop_price" >{$money_f}{{item.sold_price}}</span>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="cartBox checkoutBox">
                    <div class="title"><h4>Order Summary</h4></div>

                    <div class="cartMain">
                        <div class="coupon">
                            <div>
                                <span>Coupon Code</span>
                            </div>
                        </div>
                        <div id="js_checkoutPanelView">
                            <div class="userCoupon clearfix">
                                <el-autocomplete placeholder="Enter or Select coupon code" value-key="name"  v-model="coupon_name" :fetch-suggestions="querySearch" @select="selectUseCoupon"> </el-autocomplete>
                                <button type="submit" class="applybtn logsss_event_cl" id="applybtn" @click="handleUseCoupon">APPLY</button>
                                <!-- 
                                <el-select v-model="coupon_id" @change="couponChanged" filterable placeholder="请选择">
                                    <el-option label="select coupon" value=""></el-option>
                                    <el-option
                                            v-for="(item,index) in coupon_list"
                                            :key="index"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select> -->
                                <div class="coupon_status ">
                                    <div id="apply_msg" class="color-red">{{get_coupon_obj.name}}</div>
                                </div>
                            </div> <!-- coupon -->
                            <div class="cartTotal" id="js_cart_count">
                                <ul class="clearfix">
                                    <li>Subtotal</li>
                                    <li class="colorpink tr">
                                        <span class="bizhong">{$money_f_name}</span>
                                        <span class="fb js-totalPrice price-temp" >{$money_f}{{get_goods_money}}</span>
                                    </li>
                                </ul> <!--  -->
                                <ul class="mt-1 color-red clearfix" v-if="get_coupon_money>0">
                                    <li class="coupon-item">Coupon </li>
                                    <li class="tr color-red">
                                        -
                                        <span class="bizhong">{$money_f_name}</span>
                                        <span class="my_shop_price minus price-temp" >{$money_f}{{get_coupon_money}}</span>
                                    </li>
                                </ul>

                                <ul class="mt-1 clearfix" v-if="get_tip_money-0 > 0">
                                    <li class="coupon-item">Add tip </li>
                                    <li class="tr">
                                        <span class="bizhong">{$money_f_name}</span>
                                        <span class="my_shop_price minus price-temp" >{$money_f}{{get_tip_money}}</span>
                                    </li>
                                </ul>
                                <ul class="mt-1 clearfix" v-if="get_pay_express_money-0 > 0">
                                    <li class="coupon-item">Express fee </li>
                                    <li class="tr">
                                        <span class="bizhong">{$money_f_name}</span>
                                        <span class="my_shop_price minus price-temp" >{$money_f}{{get_pay_express_money}}</span>
                                    </li>
                                </ul>

                                <ul class="mt-1 color-red clearfix" v-if="get_goods_gift_low_money-0 > 0">
                                    <li class="coupon-item">Free Gift </li>
                                    <li class="tr color-red">-<span class="bizhong">{$money_f_name}</span><span
                                            class="my_shop_price minus price-temp" >{$money_f}{{get_goods_gift_low_money}}</span>
                                    </li>
                                </ul>
                                <ul class="grandTotal clearfix">
                                    <li class="f16 fsb tl">Total</li>
                                    <li class="tr">
                                        <span class="bizhong">{$money_f_name}</span>
                                        <span class="fsb" id="price_total" >{$money_f}{{get_pay_money}}</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="checkoutBtnWrap js-btn-checkout" v-show="step=='order'">
                                <el-button :loading="submitLoading" href="javascript:;" class="checkoutBtn"  @click="handleSubmit">Safe Payment</el-button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <form :action="payOrderInfo_asiabill.form_url" ref="asiabillForm" method="post">
        <input name="merNo" type="hidden" :value="payOrderInfo_asiabill.merNo" />
        <input name="gatewayNo" type="hidden" :value="payOrderInfo_asiabill.gatewayNo" />
        <input name="orderNo" type="hidden" :value="payOrderInfo_asiabill.orderNo" />
        <input name="orderCurrency" type="hidden" :value="payOrderInfo_asiabill.orderCurrency" />
        <input name="orderAmount" type="hidden" :value="payOrderInfo_asiabill.orderAmount" />
        <input name="signInfo" type="hidden" :value="payOrderInfo_asiabill.signInfo" />
        <input name="returnUrl" type="hidden" :value="payOrderInfo_asiabill.returnUrl" />
        <input name="callbackUrl" type="hidden" :value="payOrderInfo_asiabill.callbackUrl" />
        <input name="firstName" type="hidden" :value="payOrderInfo_asiabill.firstName" />
        <input name="lastName" type="hidden" :value="payOrderInfo_asiabill.lastName" />
        <input name="email" type="hidden" :value="payOrderInfo_asiabill.email" />
        <input name="phone" type="hidden" :value="payOrderInfo_asiabill.phone" />
        <input name="paymentMethod" type="hidden" :value="payOrderInfo_asiabill.paymentMethod" />
        <input name="country" type="hidden" :value="payOrderInfo_asiabill.country" />
        <input name="state" type="hidden" :value="payOrderInfo_asiabill.state" />
        <input name="city" type="hidden" :value="payOrderInfo_asiabill.city" />
        <input name="address" type="hidden" :value="payOrderInfo_asiabill.address" />
        <input name="zip" type="hidden" :value="payOrderInfo_asiabill.zip" />
        <input name="goods_detail" type="hidden" :value='payOrderInfo_asiabill.goods_detail' />
    </form>
</div>
{/block}
{block name='script'}
<!-- Vendor scrits: js libraries and plugins-->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/tiny-slider.js"></script>
<script src="/assets/js/smooth-scroll.polyfills.min.js"></script>


<script src="/assets/js/swiper.min.js"></script>

<script>

    layui.extend({

    }).use([], function () {
        var swiper = new Swiper('.proList-swiper .swiper-container', {
            slidesPerView: 4,
            spaceBetween: 15,
            slidesPerGroup: 4,
            breakpointsInverse: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });

        const address_list = {:json_encode($address_list)};
        const city_list = {:json_encode(\\app\\common\\service\\Location::getLocation())};
        const city_info = {:json_encode(\\app\\common\\service\\Location::COUNTRY_INFO)};

        const tip_list = {:json_encode($tip_list)};
        const tip_index = tip_list.length > 0 ? tip_list.length-1 : 0 ;

        initVue({
            data: {
                listQuery:{
                    channel: '{:input("channel","cart","trim")}',
                    coupon_id:'{:input("coupon_id")}',
                },
                city_list: city_list,
                city_info: city_info,
                submitLoading:false,
                gift_money:0,
                remark:'',
                coupon_name:'',
                coupon_id:'',
                coupon_obj:{},
                address_list: address_list ,
                goods_list: [],
                coupon_list: [],
                tip_list: tip_list,
                express_list: [],
                step: "location",
                express_money: "{$express_money}",
                pay_way: "paypal",
                emailInfo:{
                    email: "",
                    email_subscribe: false,
                },
                locationInfo:{
                    country:'',
                    first_name:'',
                    last_name:'',
                    suite:'',
                    street:'',
                    state:'',
                    city:'',
                    // province:'',
                    postcode:'',
                    phone:'',
                },
                // 验证
                rules: {
                    email:[
                        { required: true, message: 'Enter a valid email', trigger: 'blur' },
                    ],
                    country: [
                        { required: true, message: 'Select a Country/Region', trigger: 'blur' },
                    ],
                    first_name: [
                        { required: true, message: 'Enter a first name', trigger: 'blur' },
                    ],
                    last_name: [
                        { required: true, message: 'Enter a last name', trigger: 'blur' },
                    ],
                    street: [
                        { required: true, message: 'Enter an address', trigger: 'blur' },
                    ],
                    state: [
                        { required: true, message: 'Enter a state', trigger: 'blur' },
                    ],
                    city: [
                        { required: true, message: 'Enter a city', trigger: 'blur' },
                    ],
                    postcode: [
                        { required: true, message: 'Enter a ZIP code', trigger: 'blur' },
                    ],
                    phone: [
                        { required: true, message: 'Enter a phone number to use this delivery method', trigger: 'blur' },
                    ],                    
                },
                orderInfo:{
                    tip_index: tip_index,
                    tip_money: '',
                    express_id: 0,
                },
                asiabillInfo:{
                    name:'',
                    number:'',
                    date:'',
                    code:'',
                },
                payOrderInfo_asiabill:{
                    'form_url':'',
                    'merNo':'',
                    'gatewayNo':'',
                    'orderNo':'',
                    'orderCurrency':'',
                    'orderAmount':'',
                    'signInfo':'',
                    'returnUrl':'',
                    'callbackUrl':'',
                    'firstName':'',
                    'lastName':'',
                    'email':'',
                    'phone':'',
                    'paymentMethod':'',
                    'country':'',
                    'state':'',
                    'city':'',
                    'address':'',
                    'zip':'',
                    'goods_detail':'',
                },
            },
            components: {
            },
            computed: {
                get_contact_name:function(){
                    return this.locationInfo.last_name+" "+this.locationInfo.first_name
                },
                get_country:function(){
                    const country_key = this.locationInfo.country
                    return this.city_list[country_key]||{}
                },
                get_country_info:function(){
                    const country_name = this.get_country.value||""
                    console.log("++++",this.city_info[country_name]||{})
                    return this.city_info[country_name]||{}
                },
                get_country_info_label:function(){
                    console.log('----------',this.get_country_info.labels||{})
                    return this.get_country_info.labels||{}
                },
                get_country_info_address_format_edit:function(){
                    return (this.get_country_info.address_format||{}).edit||0
                },
                get_country_info_address_format_edit_field:function(){
                    const state = this.get_country_info_address_format_edit-0
                    var data = []
                    if(state === 2 ){
                        data = ['city']
                    }else if(state===3 ||state===4  ||state===5  ||state===10 || state===11  || state===14 ) {
                        data = ['city','postcode','province']
                    }else if(state===6 ) {
                        data = ['city','postcode','region']
                    }else if(state===7 ) {
                        data = ['postcode']
                    }else if(state===8 ) {
                        data = ['city','region']
                    }else{
                        data = ['city','postcode']
                    }
                    return data
                },
                get_ship_to:function(){
                    return this.get_country.name+" "+this.locationInfo.street+" "+this.locationInfo.suite+" "+this.locationInfo.state+" "+this.locationInfo.city+" "+this.locationInfo.postcode+";"+this.locationInfo.phone
                },
                get_goods_ids:function(){
                    var data = [];
                    this.goods_list.map(function(item){
                        data.push(item.id)
                    })
                    return data;
                },
                get_buy_num:function(){
                    var num = 0;
                    this.goods_list.map(function(item){
                        num += item.buy_num
                    })
                    return num;
                },
                get_goods_gift_low: function(){
                    var gift_goods = undefined
                    this.goods_list.map(function(item){
                        if (item.is_gift===1 && (!gift_goods || item.sold_price-0 < gift_goods.sold_price-0 )) {
                            gift_goods = item
                        }
                    })
                    return gift_goods
                },
                get_goods_gift_low_money:function(){
                    var money = 0;
                    if(this.get_goods_gift_low && this.get_goods_money -0 > this.gift_money) {
                        money = this.get_goods_gift_low.sold_price - 0
                    }
                    return money.toFixed(2)
                },
                get_goods_money : function(){
                    var money = 0;
                    this.goods_list.map(function(item){
                        money += (item.sold_price - 0) * item.buy_num
                    })
                    return money.toFixed(2);
                },
                get_goods_weight : function(){
                    var weight = 0;
                    this.goods_list.map(function(item){
                        weight += (item.weight - 0) * item.buy_num
                    })
                    return weight;
                },
                get_pay_money:function(){
                    var money = (this.get_goods_money-0) + (this.get_tip_money-0) + (this.get_pay_express_money-0)  - this.get_coupon_money - this.get_goods_gift_low_money
                    return money < 0 ? '0.00' : money.toFixed(2)
                },
                get_tip_money: function() {
                    if(this.orderInfo.tip_index!==false){
                        return (this.get_tip_select_obj.tip_money-0).toFixed(2)
                    }else{
                        return (this.orderInfo.tip_money-0).toFixed(2)
                    }
                },
                get_express_state:function(){
                    var state = 0
                    const  express_money = this.express_money-0
                    const  goods_money = this.get_goods_money-0
                    if ( express_money > 0 && express_money < goods_money) {
                        state= 2
                    }else if( express_money >0 ) {
                        state = 1
                    }
                    return state
                },
                get_express_obj:function(){
                    var obj = {}
                    for (var i = 0; i < this.express_list.length; i++) {
                        if(this.express_list[i].id===this.orderInfo.express_id){
                            obj = this.express_list[i]
                            break;
                        }
                    }
                    return obj
                },
                get_pay_express_money:function(){
                    var money = 0;
                    if(this.get_express_state===1 && this.get_express_obj){
                        money = (this.get_express_obj.money || 0)-0
                    }
                    return money.toFixed(2);
                },
                get_tip_select_obj:function(){
                    var obj = {}
                    if(this.orderInfo.tip_index!==false){
                        obj = this.get_tip_list[this.orderInfo.tip_index]||{}
                    }
                    return obj
                },
                get_tip_list: function() {
                    var that = this
                    return this.tip_list.map(function (item) {
                        const per = item.per - 0;
                        const tip_money = per * (that.get_goods_money-0)
                        item.name = (item.per - 0) * 100 + "%"
                        item.tip_money = tip_money.toFixed(2)

                        if (!tip_money){
                            item.name = "None"
                            item.tip_money = ""
                        }
                        return item
                    })
                },
                get_coupon_obj:function(){
                    return this.coupon_obj
                },
                get_coupon_money:function(){
                    var money = 0
                    if(this.get_coupon_obj.id){
                        money = this.get_coupon_obj.money - 0
                    }
                    return money.toFixed(2)
                },
            },
            created: function () {

            },
            mounted: function () {
                this.cacheInfo('zd_cache_email_info',undefined,'emailInfo')
                this.cacheInfo('zd_cache_location',undefined,'locationInfo')
                this._initData()

            },
            methods: {
                _initData:function(){
                    const that = this

                    this.$network('goods/cartlists',this.listQuery).then(function(res){
                        var data = res.data || {}
                        that.gift_money = (data.gift_money || 0) -0
                        that.goods_list = data.goods_list ||[]
                        that.coupon_list = data.coupon_list ||[]
                        that.coupon_obj = data.coupon||{}
                    })
                },
                cacheInfo: function( key, content ,vueKey) {
                    if(content===undefined){
                        const cache_info = localStorage.getItem(key)
                        if (vueKey !==undefined && cache_info && cache_info.length>0){
                            try{
                                const json_obj = JSON.parse(cache_info)
                                for (var key in this[vueKey]){
                                    this[vueKey][key] = json_obj[key]??''
                                }
                            }catch (e){
                                console.error('cache-parse-err',err)
                            }

                        }
                    }else{
                        window.localStorage.setItem(key , content)
                    }
                },
                changeCountry: function(){
                    this.locationInfo.state = ""
                },
                handleTipSelect  : function ( index ) {
                    this.orderInfo.tip_index = index
                    this.orderInfo.tip_money = ""
                },
                handleTipCustom  : function (  ) {
                    this.orderInfo.tip_index = false
                    console.log(this.orderInfo.tip_index,this.orderInfo.tip_money)
                },

                querySearch:function(queryString, cb) {
                    var restaurants = this.coupon_list;
                    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                    // 调用 callback 返回建议列表的数据
                    cb(results);
                },
                createFilter:function(queryString) {
                    return (restaurant) => {
                        return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                    };
                },
                couponChanged:function(){
                    const full_money = this.get_coupon_obj.full_money - 0
                    if ( full_money > this.get_goods_money ){
                        this.coupon_id = ""
                        this.$message.error("Coupons must be at least "+full_money+" before they can be used")
                        return
                    }
                },
                selectUseCoupon:function(coupon){
                    this.coupon_obj = coupon
                    this.$nextTick(function(){
                        this.couponChanged()
                        this.coupon_name = ""
                    })

                },
                handleUseCoupon:function(e){
                    if(!this.coupon_name.length){
                        return
                    }
                    var that = this;
                    this.$network('coupon/search',{
                        goods_ids: this.get_goods_ids,
                        code:this.coupon_name,
                    }).then(function(res){
                        var data = res.data||{}
                        var coupon = data.coupon||{}
                        that.selectUseCoupon(coupon)

                    }).catch(function(err){
                        that.coupon_obj = {}
                    })
                },
                handleStepNext :function(step){
                    var that = this;
                    if ( step === 'order' ) {
                        this.$refs[step].validate((valid) => {
                            if (valid) {
                                this.$network('order/freightList', {
                                    country:this.locationInfo.country,
                                    goods_money:this.get_goods_money,
                                    goods_weight:this.get_goods_weight,
                                }).then(function(res){
                                    var data = res.data || {}
                                    var express_list = data.freight_list||[]
                                    that.express_list = express_list
                                    that.orderInfo.express_id = (express_list[0]||{}).id||''
                                    that.cacheInfo('zd_cache_email_info', JSON.stringify(that.emailInfo))
                                    that.cacheInfo('zd_cache_location', JSON.stringify(that.locationInfo))
                                    that.step =step
                                })

                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                       
                    }else{
                        this.step = step
                    }
                },
                handlePayWay:function(pay_way){
                    this.pay_way = pay_way
                },
                handleSetLocation:function(item){
                    if(item.email && item.email.length>0){
                        this.emailInfo.email = item.email
                    }
                    for (var key in this.locationInfo) {
                        this.locationInfo[key] = item[key] || ''
                    }
                },
                handleSubmit:function(){
                    var that = this;
                    this.submitLoading = true
                    this.$network('order/confirm', {
                        channel: this.listQuery.channel,
                        remark:this.remark,
                        emailInfo:this.emailInfo,
                        locationInfo: this.locationInfo,
                        asiabillInfo: this.asiabillInfo,
                        orderInfo:this.orderInfo,
                        tip_money:this.get_tip_money,
                        pay_way:this.pay_way,
                        coupon_id:this.coupon_obj.id,
                    }).then(function(res){
                        that.$message.success(res.msg)
                        const data = res.data||{}
                        if(data.hasOwnProperty('url')){
                            location.href=data.url
                            return
                        }
                        if(that.pay_way==='asiabill'){
                            for (var key in that.payOrderInfo_asiabill){
                                that.payOrderInfo_asiabill[key] = data[key]??''
                            }
                            console.log('asiabillForm-submit',data,that.payOrderInfo_asiabill)
                            that.$nextTick(function(){
                                this.$refs['asiabillForm'].submit()
                            })
                            console.log('asiabillForm-submit')
                        }
                        that.submitLoading = false
                    }).catch(function(err){
                        that.submitLoading = false
                    })
                },
            }
        })


    })

</script>


{/block}